let vm = new Vue({
    el: '#app',  //通过id选择器找到绑定的HTML内容
    delimiters: ['[[',']]'], //修改vue读取变量的语法
    data: {   //数据对象
        //v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',
        image_code_url: '',
        uuid: '',
        image_code:'',
        sms_code:'',
        sms_code_tip: '获取手机验证码',
        send_flag: false, // 前端防止用户频繁获取手机验证码

        //v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        //error-message
        error_name_message: '',
        error_password_message: '',
        error_password2_message: '',
        error_mobile_message: '',
        error_allow_message: '',
        error_image_code_message: '',
        error_sms_code_message: '',
    },
   mounted(){  //页面完全加载执行
        this.getCodeUrl()
   },
    methods:{  //定义和实现事件方法
        getCodeUrl(){
            this.uuid = generateUUID()
            this.image_code_url = '/image_code/'+this.uuid+'/'
        },
        check_name(){
            let reg=/^[a-zA-Z0-9-_]{5,20}$/
            if(reg.test(this.username)){
                this.error_name=false
            }else{
                this.error_name_message='请输入5-20位字符'
                this.error_name=true
            }

            if(this.error_name == false){  //满足条件才校验用户名是否重复
                let url = '/username/'+this.username+'/count/'
                axios.get(url).then(response =>{
                    if(response.data.count >=1){
                        this.error_name_message = '该用户名已被占用'
                        this.error_name = true
                    }else{
                        this.error_name = false
                    }
                }).catch(error => {
                    console.log(error.response.message)
                })
            }
        },
        check_password(){
            let reg=/^[a-zA-Z0-9-_@*]{6,15}$/
            if(reg.test(this.password)){
                this.error_password=false
            }else{
                this.error_password_message='请输入6-15位字符'
                this.error_password=true
            }
        },
        check_password2(){
            let reg=/^[a-zA-Z0-9-_@*]{6,15}$/
            if(reg.test(this.password2)){
                this.error_password2 = false
                if(this.password!=this.password2){
                    this.error_password2_message = '确认密码与密码不一致'
                    this.error_password2 = true
                }
            }else{
                this.error_password2_message='请输入6-15位字符'
                this.error_password2 = true
            }
        },
        check_mobile:function(){
            let reg=/^1[3-9]\d{9}$/
            if(reg.test(this.mobile)){
                this.error_mobile = false
            }else{
                this.error_mobile_message = '你输入的手机号格式不正确'
                this.error_mobile = true
            }
            if(!this.error_mobile){
                let url = '/mobile/'+this.mobile+'/count/'
                axios.get(url,{responseType: 'json'}).then(response =>{
                    if(response.data.count >=1){
                        this.error_mobile_message = '该手机号已被注册'
                        this.error_mobile = true
                    }else{
                        this.error_mobile = false
                    }
                }).catch(error =>{
                    console.log(error.message)
                })
            }

        },
        check_image_code:function(){
            if(this.image_code.length!=4){
                this.error_image_code_message = '请输入4位验证码'
                this.error_image_code = true
            }else{
                this.error_image_code = false
            }
        },
        send_sms_code:function(){
            if(this.send_flag == true){
                return
            }
            this.send_flag = true

            // 校验手机号和图片验证码
            this.check_mobile()
            this.check_image_code()
            if(this.error_mobile== true || this.error_image_code == true){
                this.send_flag = false  //可以重新获取手机验证码
                return ;
            }
            let url = "/sms_code/"+this.mobile+"/?uuid="+this.uuid+"&image_code="+this.image_code
            axios.get(url, {
                responseType: 'json'
            }).then((response) => {
                if (response.data.code == '0'){
                    //发送短信成功
                    let num = 60
                    let t = setInterval(()=>{
                       if(num ==1){
                           clearInterval(t)
                           this.sms_code_tip = '获取手机验证码'
                           this.getCodeUrl()  // 重新获取图片验证码
                           this.send_flag =false // 可以重新获取手机验证码
                       }else{
                            num -= 1
                        this.sms_code_tip = num+"秒"
                       }

                    },1000)
                }else{
                    if(response.data.code == "4001"){
                        this.error_image_code_message = response.data.errmsg
                        this.error_image_code = true
                        //重新生成图片验证码
                        this.getCodeUrl()
                        this.send_flag = false //可以重新获取手机验证码
                    }else{
                        this.error_sms_code_message = response.data.errmsg
                        this.error_sms_code = true
                    }
                }

            }).catch((error) => {
                console.log(error.response)
                this.send_flag = false //可以重新获取手机验证码
            })
        },
        check_sms_code:function (){
            if(this.sms_code.length!=6){
                this.error_sms_code_message = '请输入6位短信验证码'
                this.error_sms_code = true
            }else{
                this.error_sms_code = false
            }
        },
        check_allow:function(){
            if(this.allow){
                this.error_allow = false
            }else{
                this.error_allow_message = '请同意协议'
                this.error_allow = true
            }
        },
        on_submit(){
            this.check_name()
            this.check_password()
            this.check_password2()
            this.check_mobile()
            this.check_image_code()
            this.check_sms_code()
            this.check_allow()
            if(this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_image_code ==true || this.error_sms_code == true || this.error_allow == true ){
                window.event.returnValue = false  //禁止表单的提交
            }
        }
    }
})